<template>
    <!-- <h3>AILabel</h3> -->
    <!-- <img src='../assets/20240129.jpg'> -->
    <img ref="myImg" :src="imgUrl">
    <canvas ref="myCanvas" hidden></canvas>
    <!-- <img :src="image" alt="图片" />这里 -->
    <div class="main">
        <div class="operation">
            <div class="button-wrap">
                <el-button type="primary" link @click="setMode('PAN')">平移</el-button>
                <el-button type="primary" link class="el-icon-location-outline"
                    @click="setMode('MARKER')">注记</el-button>
                <el-button type="primary" link class="el-icon-more-outline" @click="setMode('POINT')">点</el-button>
                <el-button type="primary" link class="el-icon-minus" @click="setMode('LINE')">线段</el-button>
                <el-button type="primary" link class="el-icon-share" @click="setMode('POLYLINE')">多段线</el-button>
                <el-button type="primary" link class="el-icon-orange" @click="setMode('CIRCLE')">圆</el-button>
                <el-button type="primary" link class="el-icon-full-screen" @click="setMode('RECT')">矩形</el-button>
                <el-button type="primary" link class="el-icon-house" @click="setMode('POLYGON')">多边形</el-button>
                <el-button type="primary" link class="el-icon-magic-stick" @click="Fill()">填充</el-button>
                <el-button type="primary" link class="el-icon-refresh-left" @click="Revoke()">撤销</el-button>
                <el-button type="primary" link @click="getFeatures()">获取标注数据</el-button>

                <!-- <button class="btn btn-default" @click="setMode('DRAWMASK')">
          涂抹
        </button> -->
                <!-- <button class="btn btn-default" @click="setMode('CLEARMASK')">
          擦除
        </button> -->
                <!-- <button class="btn btn-default" @click="getRle()">获取rle数据</button> -->
            </div>
            <div class="zoom-icon-wrapper">
                <div class="zoom-icon-plus" @click="zoomIn">+</div>
                <div class="zoom-icon-minus" @click="zoomOut">-</div>
            </div>
        </div>

        <div id="testMap"></div>
    </div>
</template>
<script>
// import { onMounted } from vue;
import AILabel from "ailabel";
import imgUrl from  "@/assets/earth.png";
export default {
    data() {
        return {
            imgUrl: imgUrl,
            dataUrl: "",
            drawingStyle: {},
            mode: "",
            itemName: "",
            editId: "", //待填充图形id
            deleteIconId: "delete01",
            gMap: null, //AILabel实例
            gFirstFeatureLayer: null, //矢量图层实例(矩形，多边形等矢量)
            allFeatures: null, //所有features
        }
    },
    watch: {
        mode(mode) {
            this.gMap.setMode(mode);
            this.setDrawingStyle(mode);
        },
    },

    mounted() {

        // const canvas = this.$refs.myCanvas;
        // const ctx = canvas.getContext('2d');

        // // 在 Canvas 上进行绘图操作
        // ctx.fillStyle = 'red';
        // ctx.fillRect(0, 0, canvas.width, canvas.height);

        // const img = this.$refs.myImg;
        // const canvas = this.$refs.myCanvas;

        // if (img && canvas) {
        //     const ctx = canvas.getContext('2d');

        //     img.onload = () => {
        //         canvas.width = img.naturalWidth;
        //         canvas.height = img.naturalHeight;

        //         ctx.drawImage(img, 0, 0);
        //     };
        // }
        // that.getDataUrl();
        // console.log("执行前", that.dataUrl);

        // console.log(that.dataUrl);
        this.initMap();
    },
    methods: {
        // initMap() {
        //     // 声明容器
        //     const gMap = new AILabel.Map('testMap', {
        //         center: { x: 250, y: 177 },
        //         zoom: 800,
        //         mode: 'PAN' // 绘制线段
        //     });
        //     // var myFirstPromise = new Promise((resolve) => {
        //     //     var image = new Image();
        //     //     image.src = this.imgUrl;
        //     //     var myCanvas = document.createElement("canvas");
        //     //     myCanvas.width = image.width;
        //     //     myCanvas.height = image.height;
        //     //     var ctx = myCanvas.getContext("2d");

        //     //     image.onload = () => {
        //     //         //here you all code goes
        //     //         ctx.drawImage(image, 0, 0);
        //     //         var cas = myCanvas.toDataURL("image/png");
        //     //         console.log('called first');
        //     //         resolve(cas)
        //     //     }
        //     // });
        //     // await myFirstPromise.then((dataUrl) => {
        //     //     this.dataUrl = dataUrl
        //     // });
        //     // console.log(this.dataUrl);
        //     //console.log(this.dataUrl);
        //     // 显示一张图片
        //     const gFirstImageLayer = new AILabel.Layer.Image(
        //         "layer-image",
        //         {
        //             src: this.imgUrl,
        //             width: 500,
        //             height: 300,
        //             position: {
        //                 // 图片左上角坐标
        //                 x: 0,
        //                 y: 0,
        //             },
        //         },
        //         { name: "第一个图片图层" },
        //         { zIndex: 5 }
        //     );
        //     gMap.addLayer(gFirstImageLayer);

        //     this.gMap = gMap;
        // },


        async initMap() {
            let that = this;
            const gMap = new AILabel.Map("testMap", {
                center: { x: 250, y: 150 }, // 为了让图片居中
                zoom: 500,
                mode: "PAN", // 绘制线段
                refreshDelayWhenZooming: true, // 缩放时是否允许刷新延时，性能更优
                zoomWhenDrawing: true,
                panWhenDrawing: true,
                zoomWheelRatio: 5, // 控制滑轮缩放缩率[0, 10), 值越小，则缩放越快，反之越慢
                withHotKeys: true, // 关闭快捷键
            });
            that.gMap = gMap;
            this.addEvent();
            await this.getDataUrl(this.imgUrl);
            console.log(this.dataUrl);
            const gFirstImageLayer = new AILabel.Layer.Image(
                "first-layer-image", // id
                {
                    src: this.dataUrl,
                    width: 500,
                    height: 300,
                    crossOrigin: false, // 如果跨域图片，需要设置为true
                    position: {
                        // 左上角相对中心点偏移量
                        x: 0,
                        y: 0,
                    },
                    // 网格
                    grid: {
                        // 3 * 3
                        columns: [{ color: "#9370DB" }, { color: "#FF6347" }],
                        rows: [{ color: "#9370DB" }, { color: "#FF6347" }],
                    },
                }, // imageInfo
                { name: "第一个图片图层" }, // props
                { zIndex: 5 } // style
            );
            // 添加到gMap对象
            gMap.addLayer(gFirstImageLayer);

            // 添加矢量图层
            const gFirstFeatureLayer = new AILabel.Layer.Feature(
                "first-layer-feature", // id
                { name: "第一个矢量图层" }, // props
                { zIndex: 10 } // style
            );
            this.gFirstFeatureLayer = gFirstFeatureLayer;
            gMap.addLayer(gFirstFeatureLayer);

            window.onresize = function () {
                this.gMap && this.gMap.resize();
            };
        },
        zoomIn() {
            this.gMap.zoomIn();
        },
        zoomOut() {
            this.gMap.zoomOut();
        },
        setMode(mode) {
            this.mode = mode;
        },
        // 获取所有features
        getFeatures() {
            this.allFeatures = this.gFirstFeatureLayer.getAllFeatures();
            console.log("--allFeatures--", this.allFeatures);
        },
        // 初始样式
        setDrawingStyle(mode) {
            let drawingStyle = {};
            switch (mode) {
                //平移
                case "PAN": {
                    break;
                }
                //注记
                case "MARKER": {
                    // 忽略
                    break;
                }
                //点
                case "POINT": {
                    this.drawingStyle = { fillStyle: "#FF8C00" };
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                //圆
                case "CIRCLE": {
                    this.drawingStyle = {
                        fillStyle: "#87CEFF",
                        strokeStyle: "#87CEFF",
                        lineWidth: 5,
                    };
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                //线段
                case "LINE": {
                    this.drawingStyle = {
                        strokeStyle: "#BA55D3",
                        lineJoin: "round",
                        lineCap: "round",
                        lineWidth: 10,
                        arrow: false,
                    };
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                //多线段
                case "POLYLINE": {
                    this.drawingStyle = {
                        strokeStyle: "#FF1493",
                        lineJoin: "round",
                        lineCap: "round",
                        lineWidth: 10,
                    };
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                //矩形
                case "RECT": {
                    this.drawingStyle = { strokeStyle: "#0f0", lineWidth: 1 };
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                //多边形
                case "POLYGON": {
                    this.drawingStyle = {
                        strokeStyle: "#0099CC", //边框颜色
                        fill: true, //是否填充
                        fillStyle: "#FF6666", //填充色
                        globalAlpha: 0.3,
                        lineWidth: 3,
                        fill: true,
                        stroke: true,
                    };
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                //涂抹
                case "DRAWMASK": {
                    this.drawingStyle = {
                        strokeStyle: "rgba(255, 0, 0, .5)",
                        fillStyle: "#00f",
                        lineWidth: 50,
                    };
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                //擦除
                case "CLEARMASK": {
                    this.drawingStyle = { fillStyle: "#00f", lineWidth: 30 };
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                default:
                    break;
            }
        },

        // 添加图形
        addFeature(data, type, id) {
            let that = this;
            let drawingStyle = this.drawingStyle;
            //线
            if (type === "LINE") {
                const scale = that.gMap.getScale();
                const width = drawingStyle.lineWidth / scale;
                const lineFeature = new AILabel.Feature.Line(
                    id, // id
                    { ...data, width }, // shape
                    { name }, // props
                    drawingStyle // style
                );
                that.gFirstFeatureLayer.addFeature(lineFeature);
            }
            //线段
            else if (type === "POLYLINE") {
                const scale = that.gMap.getScale();
                const width = drawingStyle.lineWidth / scale;
                const polylineFeature = new AILabel.Feature.Polyline(
                    id, // id
                    { points: data, width }, // shape
                    { name }, // props
                    drawingStyle // style
                );
                that.gFirstFeatureLayer.addFeature(polylineFeature);
            }
            //矩形
            else if (type === "RECT") {
                const rectFeature = new AILabel.Feature.Rect(
                    id, // id
                    data, // shape
                    { name }, // props
                    drawingStyle // style
                );
                that.gFirstFeatureLayer.addFeature(rectFeature);
            }
            //多边形
            else if (type === "POLYGON") {
                const polygonFeature = new AILabel.Feature.Polygon(
                    id, // id
                    { points: data }, // shape
                    { name }, // props
                    drawingStyle // style
                );
                that.gFirstFeatureLayer.addFeature(polygonFeature);
            }
            //点
            else if (type == "POINT") {
                const gFirstFeaturePoint = new AILabel.Feature.Point(
                    id, // id
                    { x: data.x, y: data.y, r: 5 }, // shape
                    { name }, // props
                    { fillStyle: "#FF8C00", zIndex: 5, lineWidth: 2 } // style
                );
                that.gFirstFeatureLayer.addFeature(gFirstFeaturePoint);
            }
            //注记
            else if (type == "MARKER") {
                const gFirstMarker = new AILabel.Marker(
                    id, // id
                    {
                        src: "src/assets/earth.png",
                        position: {
                            // marker坐标位置
                            x: data.x,
                            y: data.y,
                        },
                        offset: {
                            x: -16,
                            y: 32,
                        },
                    }, // markerInfo
                    { name: "第一个marker注记" } // props
                );
                that.gFirstFeatureLayer.addFeature(gFirstMarker);
            }
            //圆
            else if (type == "CIRCLE") {
                const gFirstFeatureCircle = new AILabel.Feature.Circle(
                    id, // id
                    { cx: data.cx, cy: data.cy, r: data.r }, // shape
                    { name: "第一个矢量图层" }, // props
                    {
                        fillStyle: "#87CEFF",
                        strokeStyle: "#3CB371",
                        globalAlpha: 1,
                        lineWidth: 5,
                    } // style
                );
                that.gFirstFeatureLayer.addFeature(gFirstFeatureCircle);
            }
            //涂抹
            else if (type == "DRAWMASK") {
                const drawMaskAction = new AILabel.Mask.Draw(
                    `${+new Date()}`, // id
                    "铅笔",
                    { points: data, width: 5 }, // shape
                    { name: "港币", price: "1元" }, // props
                    { strokeStyle: "#FF0000" } // style
                );
                that.gFirstFeatureLayer.addAction(drawMaskAction);
            }
            //擦除
            else if (type == "CLEARMASK") {
                const clearMaskAction = new AILabel.Mask.Clear(
                    "first-action-clear", // id
                    { points: data, width: 5 } // shape
                );
                that.gFirstMaskLayer.addAction(clearMaskAction);
            }
            this.getFeatures();
        },
        // 画完取名
        getName(mode) {
            return this.$prompt("请输入填写名字", {
                confirmButtonText: "确定",
                showCancelButton: false,
            })
                .then(({ value }) => {
                    this.itemName = value;
                    return value;
                })
                .catch(() => {
                    return null;
                });
        },
        // 增加删除图标
        addDeleteIcon(feature, shape) {
            let gMap = this.gMap;
            let that = this;
            // 添加delete-icon
            // let points = that.getPoints(feature);
            console.log(shape, "shape");
            const gFirstMarker = new AILabel.Marker(
                that.deleteIconId, // id
                {
                    src: "src/assets/earth.png",
                    position: { x: shape.x + shape.width, y: shape.y - 15 }, // 矩形右上角 根据图形动态调整
                    offset: {
                        x: -20,
                        y: -4,
                    },
                }, // markerInfo
                { name: "delete" } // props
            );
            gFirstMarker.events.on("click", (marker) => {
                // 首先删除当前marker
                gMap.markerLayer.removeMarkerById(marker.id);
                // 删除对应text
                // gFirstTextLayer.removeTextById(textId);
                // 删除对应feature
                that.gFirstFeatureLayer.removeFeatureById(feature.id);
            });
            gMap.markerLayer.addMarker(gFirstMarker);

            // that.gFirstFeatureLayer
        },
        // 删除 删除按钮
        deIcon() {
            this.gMap.markerLayer.removeAllMarkers();
        },
        // 增加事件
        addEvent() {
            let that = this;
            let gMap = this.gMap;
            gMap.events.on("drawDone", (type, data) => {
                console.log("--type, data--", type, data);
                // that.addFeature(data, type);
                if (type == "CLEARMASK" || type == "DRAWMASK") {
                    that.addFeature(data, type);
                } else {
                    that.getName(type).then((id) => {
                        if (id) {
                            that.addFeature(data, type, id);
                        } else {
                            this.$message({
                                type: "info",
                                message: "请填写名字",
                            });
                        }
                    });
                }
            });
            gMap.events.on("boundsChanged", (data) => {
                console.log("--map boundsChanged--", data);
                return "";
            });
            // 双击编辑 在绘制模式下双击feature触发选中
            gMap.events.on("featureSelected", (feature) => {
                this.editId = feature.id;
                console.log("--map featureSelected--", feature, "双击编辑");
                //设置编辑feature
                gMap.setActiveFeature(feature);
                if (feature.type != "POINT") {
                    // 增加删除按钮
                    that.addDeleteIcon(feature, feature.shape);
                }
            });
            //右键 目前只针对点双击选中右键触发
            gMap.events.on("featureDeleted", (feature) => {
                if (feature.type == "POINT") {
                    // 根据id删除对应feature
                    that.gFirstFeatureLayer.removeFeatureById(feature.id);
                }
            });
            // 单机空白取消编辑
            gMap.events.on("featureUnselected", () => {
                // 取消featureSelected
                that.editId = "";
                that.deIcon();
                gMap.setActiveFeature(null);
            });
            // 更新完
            gMap.events.on("featureUpdated", (feature, shape) => {
                console.log(feature);
                // 更新或者移动需要重新设置删除图标
                that.deIcon();
                feature.updateShape(shape);
                if (feature.type != "POINT") {
                    that.addDeleteIcon(feature, shape);
                }
            });

            // 删除
            gMap.events.on("FeatureDeleted", () => {
                console.log(2222222);
                // that.gFirstFeatureLayer.removeFeatureById(that.editId);
            });
        },
        // 获取坐标 需要自行添加
        getPoints(feature) {
            switch (feature.type) {
                case "RECT":
                    return feature.getPoints();
                case "LINE":
                    return [feature.shape.start, feature.shape.end];
                case "POLYLINE":
                    return feature.shape.points;
                case "POLYGON":
                    return feature.shape.points;
                default:
                    return [];
            }
        },
        //填充事件
        Fill() {
            console.log("填充事件");
            let fill = this.gFirstFeatureLayer.getFeatureById(this.editId);
            console.log("--填充对象--", fill);
            fill.style.fillStyle = "#FFDAB9";
            fill.style.fill = true;
            //刷新map
            this.gMap.refresh();
        },
        //撤销
        Revoke() {
            console.log("撤销");
            this.getFeatures();
            this.allFeatures.pop();
            //刷新map
            this.gMap.refresh();
            console.log(this.allFeatures, "--所有操作--");
        },
        async getDataUrl(imgUrl) {

            var myFirstPromise = new Promise((resolve) => {
                var image = new Image();
                image.src = this.imgUrl;
                var myCanvas = document.createElement("canvas");
                myCanvas.width = image.width;
                myCanvas.height = image.height;
                var ctx = myCanvas.getContext("2d");

                image.onload = () => {
                    //here you all code goes
                    ctx.drawImage(image, 0, 0);
                    var cas = myCanvas.toDataURL("image/png");
                    console.log('called first');
                    resolve(cas)
                }
            });
            await myFirstPromise.then((dataUrl) => {
                this.dataUrl = dataUrl
            });
        },
        callFunction() {
            var image = new Image();
            image.src = this.imgUrl;
            var myCanvas = document.createElement("canvas");
            myCanvas.width = image.width;
            myCanvas.height = image.height;
            var ctx = myCanvas.getContext("2d");
            return new Promise((resolve, reject) => {
                image.onload = () => {
                    //here you all code goes
                    ctx.drawImage(image, 0, 0);
                    cas = myCanvas.toDataURL("image/png");
                    console.log('called first');
                    resolve(cas)
                }
            })
        }
    },
    beforeDestroy() {
        this.gMap.destroy();
    },
};

</script>


<style>
.main {
    display: flex;
    flex-direction: row;
    margin: 50px;
    justify-content: center;
}

.button-wrap {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    position: relative;
    z-index: 99;
}

#testMap {
    /* margin: 0 auto; */
    overflow: hidden;
    position: relative;
    height: 600px;
    width: 800px;
    border: 1px dashed #ccc;
}

.zoom-icon-wrapper {
    position: absolute;
    /* left: 20px; */
    /* top: 20px; */
    z-index: 1000;
}

.zoom-icon-plus {
    width: 30px;
    height: 30px;
    line-height: 20px;
    text-align: center;
    border: 3px solid #6495ed;
    font-size: 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #ff8c00;
    cursor: pointer;
}

.zoom-icon-plus:hover {
    border-color: #4169e1;
}

.zoom-icon-minus {
    margin-top: 6px;
    width: 30px;
    height: 30px;
    line-height: 20px;
    text-align: center;
    border: 3px solid #6495ed;
    font-size: 25px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    color: #ff8c00;
    cursor: pointer;
}

.zoom-icon-minus:hover {
    border-color: #4169e1;
}

/* 删除图标 */
#delete01 {
    width: 20px;
    height: 20px;
}

.el-button+.el-button {
    margin-left: 0px;
}
</style>